<template>
    <div>
        <!-- 上半部分 -->
        <div>
            <div class="icon1">
                <van-icon name="setting-o" size="25px" style="margin:15px 0  0 300px;" @click="$router.push('/meset')" />
            </div>
            <!-- 头像 -->
            <div class="icon2" >
                <van-image
                @click="$router.push(`/personal`)"
                style="margin: 10px 0 0 20px;"
                    round
                    width="70px"
                    height="70px"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                <div style="margin:0 15px; ">
                <RouterLink to="/personal" style="color:black;"><b>img_88888</b></RouterLink>
                <RouterLink to="/personal" style="color:black;"><h5>点击编辑个人信息</h5></RouterLink>
                
                </div>
            </div>
            <div class="icon3">
                <div>
                    <h2>0</h2>
                    <span>卡卷</span>
                </div>
                <div style="border-left:1px solid #aaa ;"></div>
                <div>
                    <h2>0</h2>
                    <span>收藏阿姨</span>
                </div>
            </div>
        </div>
        <!-- 下半部分 -->
        <div style="background-color: #eee;  height: 500px;" class="LowerHalf">
            <div class="LowerHalf_0">
                <div style="background-color: white; " class="LowerHalf_1">
                <span>我的订单</span>
                <div class="LowerHalf_2">
                </div>
                </div>
                <div class="LowerHalf_3" style="background-color: white;" @click="$router.push('/shoppingCart')">
                    <span>我的购物车</span>
                    <div>
                        <span style="color:#aaa;font-size:13px;">购物车详情</span>
                        <van-icon name="shopping-cart-o" style="margin: 0 10px;" size="20px" />
                    </div>
                </div>
            </div>
            <div class="LowerHalfs">
                <h4>服务与工具</h4>
                <div class="LowerHalfs_0">
                    <div class="LowerHalfs_1">
                        <van-icon @click="map" name="location-o" size="20px" color="red" style="margin-bottom: 10px;"/>
                        <h5>我的地址</h5>
                    </div>
                    <div class="LowerHalfs_1">
                        <van-icon name="records" size="20px" color="red" style="margin-bottom: 10px;"/>
                        <h5>萌芽日记</h5>
                    </div>
                    <div class="LowerHalfs_1">
                        <van-icon name="smile-o" size="20px" color="red" style="margin-bottom: 10px;"/>
                        <h5>宝宝测量</h5>
                    </div>
                    <div class="LowerHalfs_1">
                        <van-icon name="shield-o" size="20px" color="red" style="margin-bottom: 10px;" />
                        <h5>疫苗接种表</h5>
                    </div>
                 </div>
                 <div class="LowerHalfs_2">
                    <div class="LowerHalfs_1">
                        <van-icon name="bag-o" size="20px" color="red" style="margin-bottom: 10px;" />
                        <h5>特产包</h5>
                    </div>
                    <div class="LowerHalfs_1">
                        <van-icon name="goods-collect-o" size="20px" color="red" style="margin-bottom: 10px;"/>
                        <h5>我的奖品</h5>
                    </div>
                    <div class="LowerHalfs_1">
                        <van-icon name="wechat" size="20px" color="red" style="margin-bottom: 10px;" />
                        <h5>微信福利官</h5>
                    </div>
                 </div>
             </div>
             <!-- 客服中心 -->

             <div class="customer">
                <!-- 客服头像 -->
                <div class="customer_0" @click="$router.push('/customer')">
                   <div class="customer_1">
                    <img style="width: 40px; height: 40px;" src="@/assets/Me/KHZX.jpg" alt="">
                    <div class="customer_2">
                    <h5>客服中心</h5>
                    <span style="font-size:12px;">很高兴为您服务~</span>
                   </div>
                   </div>
                   <span style="font-size: 13px;color: #aaa;">咨询更多问题</span>
                </div>
                <!-- 标签 -->
                <div class="label">
                    <span>如何联系保洁师</span>
                    <span>如何取消已预约的保洁订单</span>
                    
                </div>
                <div class="label_1">
                    <span>保洁服务如何制定保洁室？</span>
                    <span>如何修改保洁订单信息</span>
                </div>
                
             </div>
        </div>
    </div>
</template>

<script>
import { RouterLink } from 'vue-router';

 export default {
    components: { RouterLink },
    methods: {
        map() {
            this.$router.push('/confirmadd')
        }
    },
}
</script>

<style lang="scss" scoped>
.icon2{
    display: flex;
    align-items: center;
}
.icon3{
    display: flex;
    text-align: center;
    justify-content: space-evenly;
}
.icon3>div{
    margin: 20px 0;
}
.icon3>div>span{
    font-size: 12px;
}
.LowerHalf{
    padding: 10px;
}
.LowerHalf_0{
    height: 110px;
    background-color: white;
}
.LowerHalf_1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.LowerHalf_2{
    display: flex;
    align-items: center;
}
.LowerHalf_3{
    padding:15px 10px;
    width: 85%;
    margin-left: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 3px 1px #eee;
    border: 1px solid  #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.LowerHalfs{
    margin:10px 0;
    height: 45%;
    background-color: white;
}
.LowerHalfs h4{
    padding: 10px;
}
.LowerHalfs_0{
    display: flex;
    justify-content: space-evenly;
    margin: 20px 0;
    align-items: center;

}
.LowerHalfs_2{
    display: flex;
    justify-content: space-evenly;
    margin: 10px 0;
}
.LowerHalfs_1{
text-align: center;
}
b{
    font-size: 23px;
}

// 客服中心
.customer{
    height: 35%;
    background-color: white;
}
.customer_0{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
}
.customer_1{
    display: flex;
    align-items: center;
}
// 客服中心 标签
.label{
    padding: 5px;
    display: flex;
    justify-content: space-evenly;
}
.label_1{
    padding: 5px;
    display: flex;
    justify-content: space-evenly;
}
.label_1 span{
    font-size: 10px;
    padding: 5px;
    box-shadow: 2px 2px 3px 1px #eee;
    border-radius: 10px;
    margin:0 5px;
}
.label span{
    font-size: 10px;
    padding: 5px;
    box-shadow: 2px 2px 3px 1px #eee;
    border-radius: 10px;
    margin:0 5px;
}

</style>